<template>
  <div class="home">
    <div>
      <el-form label-width="80px">
        <br>
        <el-form-item label="入库号">
          <span style="font-size: x-large;margin-left: 1%">{{form.inbound_no}}</span>
        </el-form-item>
<!--        <el-form-item label="批次号">-->
<!--          <el-input  v-model="form.patch_no" style="width: 30%" autoComplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item
          v-for="(products, index) in form.products"

          :key="products.key"
          :prop="'products.' + index + '.value'"
        >
          <span v-if="products.value === ''">
            <el-select v-model="products.value" placeholder="请选择产品">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </span>
          <span v-else style="font-size: x-large">
            {{products.value}}
          </span>

          <span></span>
          <span style="margin-left: 1%;margin-right: 1%">效期</span><el-input v-model="products.bf" style="width: 10%"></el-input >
          <span style="margin-left: 1%;margin-right: 1%">实际入库数量</span><el-input controls-position="right" :max="products.amount" v-model.number="products.amount_act" style="width: 10%"></el-input ><span style="margin-left: 1%">罐</span>
          <el-button @click.prevent="removeproducts(products)" style="margin-left: 2%">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="addproducts">新增产品</el-button>
        </el-form-item>
        <el-button type="success"  round  style="margin-left: 16px;"  @click="onSubmit">提交</el-button>
      </el-form>
    </div>

  </div>

</template>

<script>
  import { product_list } from '../../api/inbound'
  import { actinbound } from '../../api/inbound'
  import { check_inbound_details } from '../../api/inbound'
  export default {
    name: 'inbound_act',
    data() {
      return {
        options: [
          //   {
          //   value: 'A1',
          //   label: 'A1',
          // },
          //   {
          //     value: 'A2',
          //     label: 'A2',
          //   }
        ],
        form: {
          inbound_no:'',
          patch_no:'',
          products:[
          ],}
      }
    },
    mounted() {
      this.product()
      this.get_inbound_no()
    },
    methods: {


      get_inbound_no (){
        // console.log(this.$route.query.inbound_no)
        this.form.inbound_no =  this.$route.query.inbound_no
        // console.log(this.form)
        check_inbound_details(this.form).then(
          res =>{
            this.form.products = res.list
            console.log(this.form.products)
          }
        )
      },

      addproducts() {
        this.form.products.push({
          key: Date.now(),
          value: '',
          bf:'',
          amount_act:0,
        });
      },
      removeproducts(item) {
        var index = this.form.products.indexOf(item)
        if (index !== -1) {
          this.form.products.splice(index, 1)
        }
      },
      product() {
        product_list().then(res => { // 调用导入的方法进行查询
          if (res.code === 20000) {
            // console.log(this.options)
            this.options = []

            for (let index = 0; index < res.options.length; index++) {
              this.options.push({ value : "" ,label : ""});
              this.options[index].value= res.options[index][0];
              this.options[index].label= res.options[index][1];
            }
            // console.log(this.options)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      onSubmit() {
        // console.log(this.form)
        actinbound(this.form)
          .then(this.$router.push('/inbound/inbound_record'))
      }
    }
  }
</script>

<style scoped>

</style>
